<template>
  <div>
    <!-- 搜索组件 -->
    <CategoryList @categoryInfo="categoryId" :isShowCont='isShowCont'></CategoryList>

    <!-- 内容部分 -->
    <el-card>
      <div v-show="isShowCont">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin-bottom:10px;"
          @click="addAttr"
          :disabled="!category3Id"
        >添加属性</el-button>
        <el-table :data="categoryInfoList" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150">
            <template slot-scope="{row}">{{row.attrName}}</template>
          </el-table-column>
          <el-table-column prop="prop" label="属性值列表" width="width">
            <template slot-scope="{row}">
              <el-tag
                type="success"
                style="margin-right:15px;"
                v-for="attrValue in row.attrValueList"
                :key="attrValue.id"
              >{{attrValue.valueName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="150">
            <template slot-scope="{row}">
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="editAttr(row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加以及修改属性页面 -->
      <div v-show="!isShowCont">
        <el-form :inline="true">
          <el-form-item label="属性名">
            <el-input v-model="attrInfo.attrName" placeholder="请输入属性名"></el-input>
          </el-form-item>
        </el-form>
        <!-- 添加属性值 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addAttrValue"
          :disabled="!attrInfo.attrName"
        >添加属性值</el-button>
        <el-button type="info">取消</el-button>
        <el-table border style="margin:20px 0;" :data="attrInfo.attrValueList">
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="prop" label="属性值名称">
            <template slot-scope="{row,$index}">
              <!-- 属性值 -->
              <!-- 当 flag 为真 显示 input, false: 显示span -->
              <el-input
                v-model="row.valueName"
                placeholder="请输入属性值"
                size="mini"
                v-if="row.flag"
                @blur="toLook(row)"
                @keyup.native.enter="row.flag = false"
                :ref='$index'
              ></el-input>
              <span v-else @click="autoFocus(row,$index)">{{row.valueName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="200">
            <template slot-scope="{row,$index}">
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteAttrInfo($index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 当 属性值没有内容时 则保存按钮被警禁用 -->
        <el-button :disabled="attrInfo.attrValueList.length < 1" type="primary" @click="saveAttrInfo">保存</el-button>
        <el-button type="info" @click="isShowCont = !isShowCont">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Attr",
  data() {
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",
      // 三级联动信息
      categoryInfoList: [],
      // 显示隐藏内容部分
      isShowCont: true,
      // 手机新增属性 | 修改属性信息
      attrInfo: {
        attrName: "", // 属性名
        attrValueList: [], // 属性值
        categoryId: 0, // 三级分类Id
        categoryLevel: 3 // 服务器区分几级Id
      }
    };
  },
  mounted() {
    // this.categoryInfo()
  },
  methods: {
    // 自定义事件 获取三级联动信息
    categoryId({categoryId,level}) {
      if(level === 1){
        this.category1Id = categoryId
        // 清除后两级 Id
        this.category2Id = ''
        this.category3Id = ''
      }else if(level === 2){
        this.category2Id = categoryId
        // 清除三级 Id
        this.category3Id = ''
      }else{
        this.category3Id = categoryId
        // 当有三级Id时 获取动态数据
        this.getCategoryInfo()
      }
    },
    // 获取三级联动信息
    async getCategoryInfo(){
      let {category1Id,category2Id,category3Id} = this
      let result = await this.$api.attr.reqFindCategoryList(category1Id,category2Id,category3Id);
      this.categoryInfoList = result.data
    },
    // 添加商品
    addAttr() {
      // 切换 table 显示与隐藏
      this.isShowCont = !this.isShowCont;
      this.attrInfo = {
        attrName: "", // 属性名
        attrValueList: [], // 属性值
        categoryId: this.category3Id, // 三级分类Id
        categoryLevel: 3 // 服务器区分几级Id
      };
    },
    // 修改商品
    editAttr(row) {
      // let a = JSON.stringify(row)
      // this.attrInfo = JSON.parse(a)
      this.isShowCont = !this.isShowCont;
      // 将商品信息直接带过去
      // 利用 lodash 实现深拷贝
      this.attrInfo = cloneDeep(row);
      // 在修改时 是没有 flag 的
      this.attrInfo.attrValueList.forEach(item => {
        // 因为 forEach 不会被 Vue 所检测到 所以里面的数据不是响应式的
        // 此时利用 Vue.$set 方法
        this.$set(item, "flag", false);
      });
    },
    // 添加商品值
    addAttrValue() {
      // 向属性值 attrValueList 添加数据
      this.attrInfo.attrValueList.push({
        attrId: this.attrInfo.id, // 当修改属性的时候 服务器自动就带了 id 所以赋值就好了
        valueName: "",
        // 控制属性值输入框是否展示自己部分的 span
        flag: true
      });
      // 点击添加商品值 自动获取焦点
      this.$nextTick( () => {
        // 因为添加时 属性值都是在最后 所以一直让最后一个自动获取焦点就 ok
        this.$refs[this.attrInfo.attrValueList.length - 1].focus()
      });
    },
    // 删除商品信息
    deleteAttrInfo(index) {
      this.attrInfo.attrValueList.splice(index, 1);
    },
    // 保存添加以及修改的数据
    async saveAttrInfo() {
      // 过滤掉 属性值为空的数据 同时把 对象里面的 flag 删除掉
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter( item => {
        if(item.valueName !== ''){
          // 删除对象中的 flag
          delete item.flag
          return item
        }
      })

      try {
        // 保存数据
        let result = await this.$api.attr.reqAddOrUpdateAttrInfo(this.attrInfo);
        if(result.code === 200){
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
        // 返回数据页面
        this.isShowCont = true
        // 再次发送请求
        this.getCategoryInfo()
        // await this.$api.attr.reqCategory1List()
      } catch (error) {
        
        // this.$message({message:error.message,type:'error'})
      }
    },
    // 属性值失去焦点事件
    toLook(row) {
      // 当属性值输入框去掉空格还是为空的话 则后面语句 return false
      if (row.valueName.trim() === "") {
        this.$message({
          message: "请输入正确的内容",
          type: "warning"
        });
        return false;
      }
      // 防止用户添加同一种数据
      let isTrue = this.attrInfo.attrValueList.some(item => {
        if (row !== item) {
          return row.valueName == item.valueName;
        }
      });
      if (isTrue) return;
      // console.log(isTrue)
      // 控制 input 显示与隐藏
      row.flag = false;
    },
    // 点击 span 自动聚焦
    autoFocus(row, index) {
      // 控制属性值是否为编辑状态
      row.flag = true;
      // 获取 input 一进入 input 自动获取焦点
      // 对于浏览器而言 冲毁也是需要事件的， 我们上面写的 v-if 所以每次页面都是被删除的
      // 因此不会一点击就立马获取焦点
      this.$nextTick(() => {
        // 获取对应的 input 自动聚焦
        this.$refs[index].focus()
      })
    }
  }
};
</script>

<style>
</style>